<template>
  <div class="content">
    <div class="header">
      <div style="width:20px;height:10px;"></div>
      <el-button type="primary" @click.native="back">返回</el-button>
    </div>
    <div class="materialinfo">
      <div class="inforow">
        <div class="rowname">素材编号</div>
        <el-input style="width:300px;" v-model="param.code"></el-input>
      </div>
      <div class="inforow">
        <div class="rowname">素材名称</div>
        <el-input style="width:300px;" v-model="param.name"></el-input>
        <div style="font-size: 15px;margin-left:50px;margin-right:10px;">素材长度</div>
        <el-input style="width:90px;" type="number" v-model="param.long"></el-input>
        <div style="font-size: 15px;margin-left:8px;">秒</div>
      </div>
      <div class="inforow">
        <div class="rowname">有效日期</div>
        <el-date-picker
          v-model="value1"
          style="width:300px;"
          type="daterange"
          @change="change"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="inforow" style="height:80px;">
        <div class="rowname">素材描述</div>
        <el-input type="textarea" v-model="param.remark" :rows="3" style="width:500px;"></el-input>
      </div>
      <div class="inforow" style="height:40px;">
        <el-radio v-model="param.class" label="1">商业广告</el-radio>
        <el-radio v-model="param.class" label="2">公益广告</el-radio>
      </div>
      <div class="inforow" style="height:80px;">
        <div class="rowname">广告主</div>
        <!-- <el-input style="width:200px;"></el-input> -->
        <el-button type="text" style="margin-left:20px;" @click.native="setGGZ">{{GGZ_obj.name?GGZ_obj.name:'选择广告主'}}</el-button>
      </div>
      <div class="inforow">
        <div class="rowname">品牌</div>
        <el-select v-model="BrandId" placeholder="请选择">
          <el-option v-for="item in Brand_List" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="inforow" style="height:80px;">
        <div class="rowname">素材文件</div>
         <el-upload
              :action="$src+'/api/upload'"
              name="file"
              class="upload-demo"
              :multiple="false"
              :limit="1"
              :on-success="successfile"
            >
              <el-button size="small" type="primary" >点击上传</el-button>
            </el-upload>
      </div>
      <div class="inforow" style="height:40px;">
        <div class="rowname">状态</div>
        <el-radio v-model="param.status" label="1">草稿</el-radio>
        <el-radio v-model="param.status" label="2">提交审核</el-radio>
      </div>
      <div class="inforow1" style="height:40px;">
        <el-button type="primary" @click.native="save">保存</el-button>
        <el-button type="primary">取消</el-button>
      </div>
    </div>
    <div class="prop" v-if="GGZ">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:60%;">
        <div class="propheader">
          选择广告主
          <!-- <p class="close1">关闭</p> -->
          <el-button type="text" class="close1" @click.native="setGGZ">关闭</el-button>
        </div>
        <div class="info" style="width:90%;">
          <div class="topinfo">
            <div class="infoname">关键字</div>
            <el-input style="width:200px;"></el-input>
          </div>
          <div class="topinfo">
            <el-button type="primary" style="margin-left:30px;" @click.native="seach">搜索</el-button>
            <el-button type="primary" style="margin-left:30px;">新建</el-button>
          </div>
        </div>
        <div class="listtab">
          <el-table
          
            :data="GGZ_list"
            style="width: 100%"
            border
           
             :row-class-name="tableRowClassName"
              :cell-style="$rowstyle"
        :header-cell-style="$headerstyle"
          >
            <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
            <el-table-column prop="city" label="城市" align="center" ></el-table-column>
            <el-table-column prop="name" label="广告主" align="center" ></el-table-column>
            <el-table-column prop="name" align="center" label="联系人" ></el-table-column>
            <el-table-column prop="mobile" align="center" label="电话" ></el-table-column>
            <el-table-column prop="created_at" align="center" label="创建日期" ></el-table-column>
            <el-table-column label="操作" align="center" width="90">
              <template slot-scope="scope">
                <el-button
                  @click="click(scope)"
                  type="text"
                  size="small"
                >{{scope.row.check?'取消选择':'选择'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="float:right;margin-top:5px;">
            <el-pagination
              @current-change="changGGZ"
              :current-page.sync="GGZ_page"
              :page-size="5"
              layout="prev, pager, next, jumper"
              :total="GGZ_alltotal"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAdvertising } from "@/api/Market.js";
import { SETDATE } from "../../api/System.js";
import { GetBrandList,addBrand } from "@/api/read_and_edit.js";
export default {
  data() {
    return {
      GGZ_name: "",
      GGZ_page: 1,
      GGZ_alltotal: 0,
      GGZ_list: [],
      GGZ_obj:{},
      status: "1",
      value1: "",
      radio: "1",
      value: "",
      param: {
        code: "",
        name: "",
        long: "",
        begin_time: "",
        end_time: "",
        remark: "",
        file_path: "",
        class: "1",
        status: "1"
      },
      tableData: [
        {
          name: "xxx"
        }
      ],
      GGZ: false,
      Brand_List: [],
      //品牌id
      BrandId: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ]
    };
  },
  created() {
    this.BrandList();
    this.getGGZlist();
  },
  methods: {
    seach() {
      this.GGZ_page = 1;
      this.GGZ_alltotal = 0;
      this.getGGZlist();
    },
    //选择广告主
    click(scope){
     
      var row=scope.row
     console.log(scope)
     var index=scope.$index
     if(scope.row.check){
       
       this.GGZ_list[index].check=false
       this.GGZ_obj={}
     }else{
       this.GGZ_list.forEach(element => {
         element.check=false
       });
        this.GGZ_list[index].check=true
        this.GGZ_obj= this.GGZ_list[index]
     }
    // console.log(row)
    console.log(this.GGZ_obj)
    this.setGGZ()
    },
    successfile(e){
    console.log(e)
    if(e.code==200){
this.param.file_path=e.data
    }else{
      this.$message({
        message:'文件上传失败',
        type:'warning'
      })
    }
    
    },
    //获取广告主列表
    getGGZlist() {
      let data = {
        name: this.GGZ_name,
        per: 5,
        page: this.GGZ_page
      };
      getAdvertising(data).then(res => {
        if ((res.code = 200)) {
          this.GGZ_list = res.data.data;
          this.GGZ_list.forEach(element => {
            element.created_at = SETDATE(element.created_at, true);
            if(this.GGZ_obj.id){
              if(this.GGZ_obj.id==element.id){
                element.check=true
              }
            }
          });

          this.GGZ_alltotal = res.data.total;
          this.GGZ_page = res.data.current_page;
        }
      });
    },
    changGGZ(e) {
      this.GGZ_page = e;
      this.getGGZlist();
    },
    //获取品牌列表
    BrandList() {
      GetBrandList().then(res => {
        if (res.code == 200) {
          console.log(res);
          this.Brand_List = res.data;
        }
      });
    },
    save() {
    
      if (!this.param.code) {
        this.$message({
          message: "素材编号不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.param.name) {
        this.$message({
          message: "素材名称不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.param.long) {
        this.$message({
          message: "素材长度不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.param.begin_time) {
        this.$message({
          message: "素材有效期不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.param.remark) {
        this.$message({
          message: "素材描述不能为空",
          type: "warning"
        });
        return;
      }
      if(this.param.class==1){
        if(!this.BrandId){
          this.$message({
            message:'请选择品牌',
            type:'warning'
          })
          return
        }
         if(!this.GGZ_obj.id){
          this.$message({
            message:'请选择广告主',
            type:'warning'
          })
          return
        }
        var data ={...this.param}
        data.brand_id=this.BrandId
        data.media_up_id=this.GGZ_obj.id
        console.log(data)
        
      }else{
        this.$message({
            message:'公益广告暂无',
            type:'warning'
          })
          return
      }
    addBrand(data).then(res=>{
      if(res.code==200){
        this.$message({
          message:'添加素材成功',
          type:'success'
        })
        this.$router.push({
          path:'/read_and_edit_home/material'
        })
      }
    })
    },
    change(e) {
      this.param.begin_time = new Date(e[0]).getTime() / 1000;
      this.param.end_time = new Date(e[1]).getTime() / 1000;
    },
    setGGZ() {
      this.GGZ = !this.GGZ;
    },
    back() {
      this.$router.go(-1);
    },
    tableRowClassName({row, rowIndex}) {
        if (row.check) {
          console.log("xxxx")
          return 'warning-row';
        } else{
   return '';
        }
        
      }
  }
};
</script>
<style lang="scss" scoped>
.content /deep/ .el-table .warning-row {
    background: rgb(245, 170, 73);
  }
.header {
  height: 40px;
  width: 97%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.materialinfo {
  width: 97%;
  margin: 0 auto;
  margin-bottom: 100px;
  .inforow1 {
    width: 100px;
    margin: 0 auto;
    margin-top: 20px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .inforow {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .rowname {
      font-size: 15px;
      width: 100px;
    }
  }
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.warpprop {
  width: 700px;
  height: 420px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  .info {
    display: flex;
    margin: 0 auto;
    align-items: center;

    margin-top: 20px;
    .topinfo {
      width: 50%;

      align-items: center;
      display: flex;
      .infoname {
        width: 80px;
      }
    }
  }
  .listtab {
    margin: 0 auto;
    width: 90%;
    margin-top: 20px;
  }
  .getmoney {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    .addsave {
      margin: 0 auto;
      width: 50px;
      margin-top: 30px;
    }
    .addsave1 {
      margin: 0 auto;
      width: 200px;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>